<template>
  <!-- 督办管理-承办 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title" /> -->
      <!-- 表格 -->
      <list-table
        ref="table"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
      >
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template
          slot="feedbackTime"
          slot-scope="text, record"
        >
          {{ record.feedbackVO ? record.feedbackVO.feedbackTime : '—' }}
        </template>
        <template
          slot="enabled"
          slot-scope="text, record"
        >
          <span v-if="record.overseeStatus === 'DRAFT'">待提交</span>
          <span v-if="record.overseeStatus === 'NO_FEEDBACK'">结果未反馈</span>
          <span
            v-if="record.overseeStatus === 'NO_COMPLETE'"
            style="color: #ff0000"
          >未完成</span>
          <span v-if="record.overseeStatus === 'SUBMITTED'">结果审批中</span>
          <span v-if="record.overseeStatus === 'PAST'">结果审批通过</span>
          <span
            v-if="record.overseeStatus === 'REJECTED'"
            style="color: #ff0000"
          >结果审批不通过</span>
        </template>
        <template
          slot="delayStatus"
          slot-scope="text, record"
        >
          <span
            v-if="record.delayApplyVO"
            @click="handleApply(record.delayApplyVO)"
          >
            <a v-if="record.delayApplyVO ? record.delayApplyVO.delayStatus === 'SUBMITTED' : false">审批中</a>
            <a v-else-if="record.delayApplyVO ? record.delayApplyVO.delayStatus === 'PAST' : false">审批通过</a>
            <a
              v-else-if="record.delayApplyVO ? record.delayApplyVO.delayStatus === 'REJECTED' : false"
              style="color: #ff0000"
            >审批不通过</a>
          </span>
          <span v-else>—</span>
        </template>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <MoreButton>
          <template>
            <a @click="handleManage(0, record)">查看</a>
          </template>
          <template v-if="record.overseeStatus === 'NO_FEEDBACK'">
            <a @click="handleAdd(record, 1)">反馈结果</a>
          </template>
          <template v-if="record.overseeStatus !== 'NO_FEEDBACK'">
            <a @click="handleApply(record)">审批信息</a>
          </template>
          <!--结果审批未反馈 && 延期申请为审批通过或不通过 显示延期申请-->
          <template v-if="record.overseeStatus === 'NO_FEEDBACK' && (record.delayApplyVO ? record.delayApplyVO.delayStatus !== 'SUBMITTED' : true)">
            <a
              class="del_btn"
              @click="handleAdd(record, 2)"
            >延期申请</a>
          </template>
          </MoreButton>
        </template>
      </list-table>
      <a-modal
        :title="title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        width="800px"
        @cancel="handleCancel"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          :rules="editModel != 0 ? rules : {}"
        >
          <a-spin :spinning="loading">
            <!-- 表格 -->
            <div :bordered="false">
              <!--<title-name title="项目基本信息"></title-name>-->
              <custom-form
                :form-list="formList"
                :form="form"
                :edit-model="editModel == 0 ? 'V' : ''"
                @getOption="(name, e) => (name === 'formId' ? (formCode = e.code) : null)"
              >
                <!-- 附件上传 -->
                <template #fileList>
                  <template v-if="editModel != 0">
                    <l-table
                      :file-auto-loading="false"
                      :business-code="code"
                      :upload-arrys.sync="form.fileList"
                    />
                    <div class="file_prompt">
                      请上传原件，支持格式：.rar .zip .doc .docx .pdf .jpg .png .mp4 .mov
                    </div>
                  </template>
                  <file-link
                    v-else
                    :file-list="form.fileList"
                  />
                </template>
              </custom-form>
            </div>
          </a-spin>
        </a-form-model>
        <template slot="footer">
          <a-button
            key="back"
            @click="handleCancel"
          >
            关闭
          </a-button>
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
          >
            提交
          </a-button>
        </template>
      </a-modal>
    </a-card>
    <!-- 审批详情 -->
    <ApprovalDetails
      :title="'审批详情'"
      :business-id="businessId"
      :visible="visibleApprove"
      @cancel="visibleApprove = false"
      @confirm="visibleApprove = false"
    />
    <selectApprover :businessId="businessId"  :processConfig="setProcessConfig" :isCloseUpper="false" @close="closeSelectApprover"></selectApprover>
  </base-breadcrumb>
</template>

<script>
  // import { STable } from '@/components' // 表格
  import { getList, remove, feedback, delayApply } from '@/api/office/undertaking' // api
  import TreeSelectOrganization from '@/components/TreeSelectOrganization'
  import Selector from '@/components/Select/Selector'
  import BasePage from '@/views/basePage' // 基础配置
  import ApprovalDetails from '@/components/approvalDetails'
  import moment from 'moment';
  
  const overseeStatusArr = [
    {
      value:'NO_FEEDBACK',
      label:'结果未反馈',
    },
    {
      value:'SUBMITTED',
      label:'结果审批中',
    },
    {
      value:'REJECTED',
      label:'结果审批不通过',
    },
    {
      value:'PAST',
      label:'结果审批通过',
    },
    {
      value:'NO_COMPLETE',
      label:'未完成',
    },
  ]
  const searchArr = [
    // 搜索框
    {
      name: '督办事项',
      type: 'input',
      value: 'matter',
    },
    {
      name: '状态',
      value: 'overseeStatus',
      type: 'select',
      data: overseeStatusArr
    },
  ]
  const columns = [
    {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      scopedSlots: { customRender: 'index' }
    },
    {
      title: '督办发起单位',
      ellipsis: true,
      dataIndex: 'launchUnitName',
    },
    {
      title: '督办发起部门',
      ellipsis: true,
      dataIndex: 'launchDeptName',
    },
    {
      title: '督办部门负责人',
      ellipsis: true,
      dataIndex: 'deptPrincipalName',
    },
    {
      title: '督办事项分类',
      ellipsis: true,
      dataIndex: 'matterType.name',
    },
    {
      title: '督办事项',
      ellipsis: true,
      dataIndex: 'matter',
    },
    {
      title: '计划完成时间',
      dataIndex: 'planCompleteTime',
      ellipsis: true,
    },
    {
      title: '实际反馈时间',
      dataIndex: 'feedbackVO.feedbackTime',
      scopedSlots: { customRender: 'feedbackTime' },
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'overseeStatus',
      scopedSlots: { customRender: 'enabled' },
      ellipsis: true,
    },
    {
      title: '延期申请',
      dataIndex: 'delayApplyVO.delayStatus',
      scopedSlots: { customRender: 'delayStatus' },
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '180px',
      align: 'center',
      scopedSlots: { customRender: 'action' },
    },

  ]
  export default {
    name:'a'+Date.now(),
    extends: new BasePage(),
    components: {
      // STable,
      ApprovalDetails
    },
    data() {
      this.columns = columns
      this.searchArr = searchArr
      return {
        childInitData: {},
        rules: {
          undertakeResult: [{ required: true, whitespace: true, message: '请输入承办结果', trigger: 'change' }],
          delayReason: [{ required: true, message: '请输入申请延期原因', trigger: 'change' }],
          delayCompleteTime: [{ required: true, message: '请选择延期完成时间', trigger: 'change' }],
          fileList: [{ type: 'array', message: '请上传文件', trigger: 'blur' }],
        }, // 校验规则
        code:'OF02',
        listForm:{},
        visible:false,
        confirmLoading:false,
        title: '填写内容',
        queryParam: {}, // 查询参数
        loadData: (parameter) => {
          const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
          return getList(requestParameters).then((res) => {
            return res
          })
        },// 加载数据方法 必须为 Promise 对象
        // removeApi: { remove: remove }, // api
        editModel: 1,
        visibleModel:0,
        // formCode: '', // 形式选中项code
        form: {},
        layout: {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        },
        loading: false,
        formList: this.resultForm,
        //审批信息
        businessId: "",
        visibleApprove: false,
        //获取流程配置值
        processConfig: null,
        //点击提交发送流程配置值
        setProcessConfig: null,
        businessId: null
      }
    },
    computed: {
      resultForm() {
        return [
          {
            keyName: 'undertakeResult',
            viewName: 'undertakeResult',
            type: 'BaseTextarea',
            label: '承办结果',
            span:24
          },
          {
            slot: true,
            keyName: 'fileList',
            label: '附件',
            span: 24,
          },
        ]
      },
      applayForm() {
        return [
          {
            keyName: 'delayReason',
            viewName: 'delayReason',
            type: 'BaseTextarea',
            label: '申请延期原因',
            span:24
          },
          {
            keyName: 'delayCompleteTime',
            viewName: '4',
            type: 'a-date-picker',
            label: '延期完成时间',
            attrs: {
              valueFormat: 'YYYY-MM-DD',
              disabledDate: (current) => {
                const targetDay = this.childInitData.planCompleteTime || ''
                return current && current < moment(targetDay).endOf('day')
              }
            },
            span: 10
          },
          {
            slot: true,
            keyName: 'fileList',
            label: '附件',
            span: 24,
          },
        ]
      },
    },
    methods: {
      handleOk(){
          let that = this
          that.setProcessConfig = null; 
          // 校验表单
          that.$refs.ruleForm.validate((e) => {
            if (e) {
              // 提交反馈结果
              this.$confirm({
                title: '温馨提示',
                content: '确定是否提交？',
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk: () => {
                  let that = this
                  that.loading = true
                  let formData = that.$clone(that.form)
                  if(this.visibleModel==1){
                    //提交反馈结果
                    that.handleFeedback(formData)
                  }else if(this.visibleModel==2){
                    //提交延期申请
                    that.handleDelayApply(formData)
                  }
                },
              })

            }
          })
      },
      /**
       *提交反馈结果
       **/
     async handleFeedback(formData){
     //获取通过获取流程配置值
     this.processConfig = await this.$getConfigFn('oversee_feedback')
        let that = this
        let form={
          feedbackDTO:{
            undertakeResult:formData.undertakeResult,
            feedbackFileIds	: formData.fileList && formData.fileList.map(item => { return item.commonId}) || [],
            ...that.listForm,
          },
          overseeStatus: 'SUBMITTED',
          id: this.listForm.overseeId
        }
        feedback(form)
          .then((res) => {
            that.loading = false
            that.$message.success('提交成功！')
            //提交时，返回id
            this.businessId =res.data.id;
            this.setProcessConfig = this.processConfig;
            this.loadData()
            this.handleCancel()
         
            this.$refs.table.refresh(true)
          }).catch(() => {
            that.loading = false
          })
      },
      /**
       *提交延期申请
       **/
     async handleDelayApply(formData){
      //获取通过获取流程配置值
      this.processConfig = await this.$getConfigFn('oversee_delay_apply')
        let that = this
        let form={
          ...formData,
          ...this.listForm,
          delayFileIds: formData.fileList && formData.fileList.map(item => { return item.commonId}) || [],
          delayStatus: 'SUBMITTED'
        }
        delayApply(form)
          .then((res) => {
            that.loading = false
            that.$message.success('提交成功！')
            this.loadData()
            this.handleCancel()
            //提交时，返回id
            this.businessId = res.data;
            this.setProcessConfig = this.processConfig;
            this.$refs.table.refresh(true)
          }).catch(() => {
          that.loading = false
        })
      },
      //弹窗关闭
     closeSelectApprover(){
      this.visibleApprove= false;
     }, 
      handleCancel(){
        this.form={}
        this.visible=false
      },
      // 搜索
      search(value) {
        value && (this.queryParam = value)
        this.$refs.table.refresh(true)
      },
      // 反馈结果
      handleAdd(e = {}, n){
        this.childInitData = { ...e }
        this.visible = true;
        this.listForm={
          overseeId:e.id,
          feedbackTime:e.feedbackVO ? e.feedbackVO.feedbackTime : '',
        }
        if(n==1){
          this.title = '填写反馈结果';
          this.formList = this.resultForm;
          this.visibleModel=1;
          this.code='OF07'
        }else if(n==2){
          this.title = '延期申请'
          this.formList = this.applayForm
          this.visibleModel=2;
          this.code='OF08'
        }
      },
      // 审批信息
      handleApply(e){
        if(e.id){
          this.visibleApprove= true;
          this.businessId = e.id;
        }
      },
      // 操作栏
      handleManage(type, record) {
        this.editModel = type
        let query = {
          editModel: type,
        }
        if (record && record.id) {
          query.id = record.id
        }
        this.$router.push({
          path: '/undertaking/management/add',
          query,
        })
      },
    },
  }
</script>
<style lang="less" scoped>
    .file_prompt {
        color: #999;
    }
</style>